<template>
    <!-- 车辆列表 -->
    <div class="left-bottom-box">
        <group-card
            title="车辆列表"
            :useSearch="useSearch"
            :placeholder="placeholder"
            v-model:searchVal="newSearchVal"
            @triggerSearch="hanldeSearch">
            <div class="car-inner">
                <div class="left-bottom-box-head">
                    <div class="col">编号</div>
                    <div class="col">车辆信息</div>
                    <div class="col col-timer">预计出发时间</div>
                    <div class="col col-timer">实际出发时间</div>
                    <div class="col col-timer">预计到达时间</div>
                    <div class="col col-timer">实际达到时间</div>
                    <div class="col">状态</div>
                </div>
                <div class="left-bottom-box-view">
                    <div class="marquee">
                        <div
                            class="row"
                            v-for="(item, i) in carInfoList"
                            :key="item.id"
                            @click="checkCurrCar(item)"
                            :class="{
                'left-bottom-row-err': item.state == '异常',
              }">
                            <span class="col">{{ i + 1 }}</span>
                            <span class="col">{{ item.carPlate }}</span>
                            <span class="col col-timer">{{
                DateFormat(item.predictStartTime, "{h}:{i}")
                            }}</span>
                            <span class="col col-timer">{{
                DateFormat(item.actualStartTime, "{h}:{i}")
                            }}</span>
                            <span class="col col-timer">{{
                DateFormat(item.predictEndTime, "{h}:{i}")
                            }}</span>
                            <span class="col col-timer">{{
                DateFormat(item.actualEndTime, "{h}:{i}")
                            }}</span>
                            <span
                                class="col"
                                :class="{
                  'left-bottom-ready': item.state == '准备出发',
                  'left-bottom-onWay': item.state == '在路上',
                  'left-bottom-arrive': item.state == '已到达',
                  'left-bottom-err': item.state == '异常',
                }"
                                >{{ item.state }}</span
                            >
                        </div>
                    </div>
                </div>
            </div>
        </group-card>
    </div>
</template>

<script setup name="carList">
import { DateFormat } from "@/utils";
import { toUeMsg } from "@/utils/onClientNotify";
const props = defineProps({
  carInfoList: {
    type: Array,
    default: () => [],
  },
  useSearch: {
    type: Boolean,
    default: false,
  },
  placeholder: String,
  searchVal: String
});

const emits = defineEmits(['triggerSearch', 'update:searchVal'])

const newSearchVal = computed({
  get() {
    return props.searchVal
  },
  set(val) {
    emits('update:searchVal', val)
  }
})

const hanldeSearch = () => {
  emits('triggerSearch')
}

// 发送单条车辆数据
const checkCurrCar = (item) => {
  console.log(item)
  toUeMsg('updateCarData', item)
}
</script>

<style lang="scss" scoped>
.left-bottom-box {
  font-size: 13px;

  height: 294px;

  display: flex;
  flex-direction: column;
  margin-bottom: 7px;
  .car-inner {
    margin-top: 7px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;

    .left-bottom-box-head {
      height: 50px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 1);
      padding: 0 10px;
      box-sizing: border-box;
    }
    .left-bottom-box-view {
      pointer-events: all;
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      .marquee {
        flex: 1;
        display: flex;
        flex-direction: column;
        .row {
          user-select: none;
          color: #ffffff;
          height: 30px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          box-sizing: border-box;
          padding: 0 10px;
          transition: all 0.1s ease-in;
          .left-bottom-ready {
            color: #30ac68;
          }
          .left-bottom-onWay {
            color: #ffffff;
          }
          .left-bottom-arrive {
            color: #007fff;
          }
          .left-bottom-err {
            color: #ff6767;
          }
          &:hover {
            background: linear-gradient(
              90deg,
              #ccaddc 0%,
              rgba(109, 93, 118, 0.7) 100%
            );
            color: #ffffff;
          }
        }
        .left-bottom-row-err {
          background-color: #ff616130 !important;
          color: #ffffff;
        }
      }
    }
    .col:first-child {
      width: 30px;
    }
    .col:nth-child(2) {
      width: 76px;
    }
    .col-timer {
      width: 56px;
    }
    .col:last-child {
      width: 60px;
    }
  }
}
</style>
